<div
  fxLayout="row wrap"
  fxLayout.lt-md="column"
  fxLayoutAlign="flex-start"
  fxLayoutGap="10px"
>
  <div
    fxFlex.lt-sm="100%"
    fxFlex.sm="1 1 calc(50% - 10px)"
    fxFlex.md="1 1 calc(55% - 10px)"
    fxFlex.lg="1 1 calc(60% - 10px)"
    fxFlex.xl="1 1 calc(70% - 10px)"
  >
    <h2>Search</h2>

    <nz-card nzSize="small">
      Max Level:
      <strong class="monospace level">
        {{ ms.game.enemyManager.maxLevel | number: "1.0-0" }}</strong
      >
      Bonus:
      <strong class="monospace"> {{ pointBalance | number: "1.0-0" }}</strong>
      <form nz-form>
        <nz-form-item>
          <nz-form-label [nzSpan]="7" nzFor="level">Level</nz-form-label>
          <nz-form-control [nzSpan]="15">
            <nz-input-number
              [(ngModel)]="ms.game.enemyManager.searchLevel"
              (ngModelChange)="reload()"
              [nzMin]="0"
              [nzStep]="1"
              nzSize="small"
              name="searchLevel"
            ></nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item
          *ngFor="
            let opt of ms.game.enemyManager.searchOptions;
            trackBy: getOptId
          "
        >
          <nz-form-label
            [nzSpan]="7"
            [nzFor]="opt.id"
            [nzTooltipTitle]="opt.tooltip"
            >{{ opt.name }}
          </nz-form-label>
          <nz-form-control [nzSpan]="15">
            <nz-slider
              [(ngModel)]="opt.quantity"
              (ngModelChange)="reload()"
              [nzMin]="opt.min"
              [nzMax]="extended ? opt.extendedMax : opt.max"
              nzStep="1"
              [name]="opt.id"
            ></nz-slider>
          </nz-form-control>
        </nz-form-item>
      </form>
      <nz-button-group>
        <button
          nz-button
          nzType="primary"
          (click)="search()"
          [disabled]="
            ms.game.enemyManager.toDo.length +
              ms.game.enemyManager.enemies.length >=
            MAX_SEARCH_JOB
          "
        >
          <span>Search</span>
        </button>
        <button nz-button nzType="secondary" (click)="reset()">
          <span>Reset</span>
        </button>
      </nz-button-group>
    </nz-card>

    <div>
      <nz-alert
        *ngIf="ms.game.enemyManager.maxLevel < ms.game.enemyManager.searchLevel"
        nzType="warning"
        nzMessage="Search level is higher than Max level"
        nzDescription="You wont be able to attack searched enemies."
        nzShowIcon
      >
      </nz-alert>
      <nz-alert
        *ngIf="
          ms.game.enemyManager.toDo.length +
            ms.game.enemyManager.enemies.length >=
          MAX_SEARCH_JOB
        "
        nzType="info"
        nzMessage="Search list is full."
        nzShowIcon
      >
      </nz-alert>

      <nz-alert
        *ngIf="pointBalance < 0"
        nzType="warning"
        nzMessage="Bonus is negative."
        nzDescription="You have an increased distance from sprawl but you are not compensating with other bonus. Increasing other bonus (for the same search price) or decreasing sprawl is recommended."
        nzShowIcon
      >
      </nz-alert>
    </div>
  </div>

  <div
    fxFlex.lt-sm="100%"
    fxFlex.sm="1 1 calc(50% - 10px)"
    fxFlex.md="1 1 calc(45% - 10px)"
    fxFlex.lg="1 1 calc(40% - 10px)"
    fxFlex.xl="1 1 calc(30% - 10px)"
  >
    <div fxLayout="column">
      <!-- Results -->
      <div>
        <!-- <h2>Results</h2> -->
        <nz-table nzTemplateMode nzSize="small">
          <tbody>
            <tr *ngFor="let tile of expectedTiles; trackBy: getExpTileId">
              <td>
                <i
                  nz-icon
                  [nzType]="tile.unit.icon"
                  [ngClass]="tile.unit.colorClass"
                ></i>
                {{ tile.unit.name }}
              </td>
              <td class="monospace col2 center">
                {{ tile.range.min | number: "1.0-0" }} -
                {{ tile.range.max | number: "1.0-0" }}
              </td>
            </tr>
            <!-- <tr>
              <td>Fleet Power</td>
              <td class="monospace col2 center">
                +{{ fleetPowerRange.min | percent: "1.0-0" }} +{{
                  fleetPowerRange.max | percent: "1.0-0"
                }}
              </td>
            </tr> -->
            <tr>
              <td>
                <i nz-icon nzType="fa-s:arrows-alt-h"></i>
                Distance
              </td>
              <td class="monospace col2 center">
                {{ minDistance | format }} - {{ maxDistance | format }}
              </td>
            </tr>
            <tr>
              <td>
                <i nz-icon nzType="fa-s:wrench" class="production-color"></i>
                Price
              </td>
              <td class="monospace col2 center">
                {{ expectedPrice | format: true }}
              </td>
            </tr>
            <tr>
              <td><i nz-icon nzType="clock-circle"></i> Search Time</td>
              <td class="monospace col2 center">
                {{ expectedSearchTime | time }}
              </td>
            </tr>
          </tbody>
        </nz-table>
      </div>
      <!-- Jobs -->
      <div>
        <!-- <h2>Jobs</h2> -->
        <div
          cdkDropList
          [cdkDropListData]="ms.game.enemyManager.toDo"
          class="job-list"
          (cdkDropListDropped)="drop($event)"
        >
          <app-job
            cdkDrag
            class="job-box"
            *ngFor="let resToDo of ms.game.enemyManager.toDo; trackBy: getJobId"
            [job]="resToDo"
            [collection]="ms.game.enemyManager.toDo"
          ></app-job>
        </div>
      </div>
    </div>
  </div>
</div>
